<template>
	<view class="join-wrap">
		<view class="form">
			<view class="form-item clear">
				<text class="label pull-left">类型</text>
				<picker v-if="!initType" class="pull-left" @change="handleGenderChange" :range="typeList" :value="0" mode="selector" range-key="name"
				 style="width: 440rpx;">
					<text class="value" v-if="form.type">{{form.type}}</text>
					<text class="placeholder" v-else>请选择类型</text>
					<text class="iconfontPT iconxiayibu pull-right"></text>
				</picker>
				<text v-else>{{initType.name}}</text>
			</view>
			<view class="form-item clear">
				<text class="label pull-left">公司名称</text>
				<input class="form-inp pull-left" type="text" v-model="form.name" placeholder="请输入公司名称"></input>
			</view>
			<view class="form-item clear" @click="handleChooseLocation">
				<text class="label pull-left">公司地址</text>
				<text class="location pull-left inline-block text-overflow" v-if="form.location" style="width: 400rpx;">{{form.location}}</text>
				<text v-if="form.location" class="iconfontPT icondingwei"></text>
				<text class="pull-left" v-else>
					<text class="placeholder">请选择公司地址</text>
				</text>
				<text class="iconfontPT iconxiayibu pull-right" v-if="!form.location"></text>
			</view>
			<view class="form-item">
				<text class="label">公司形象照</text>
				<view class="image-wrap flex-x-start">
					<view class="image-item inline-block relative" :key="index" v-for="(item, index) in form.photos">
						<image class="image" v-if="form.photos.length" :src="`${host}/${item}`"></image>
						<text class="iconfontPT iconshanchutupian delete white" @click="handleDeleteImg(item)"></text>
					</view>
					<view class="chooseImage flex-y-center" @click="handleChooseImage('photo')">
						<text class="iconfontPT icontupian02 block"></text>
						<text class="text">添加图片</text>
					</view>
				</view>
			</view>
			<view class="form-item clear">
				<text class="label pull-left">负责人姓名</text>
				<input class="form-inp pull-left" type="text" v-model="form.adminName" placeholder="请输入负责人姓名"></input>
			</view>
			<view class="form-item clear flex" v-show="showProfession">
				<text class="label">负责人类型</text>
					<u-radio-group v-model="form.profession" class="form-radio-group">
						<u-radio v-for="(item, index) in [{name:'商户',value:1},{name:'中介',value:2},{name:'销售',value:3}]" :key="index" 
							:name="item.value"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
			</view>
			<view class="form-item clear">
				<text class="label pull-left">身份证号码</text>
				<input class="form-inp pull-left" type="text" v-model="form.idCardNumber" placeholder="请输入身份证号码"></input>
			</view>
			<view class="form-item relative admin w100" @click="handleChooseImage('admin')">
				<text class="label">负责人照片</text>
				<view class="photo-wrap x-y-center">
					<view class="photo admin-wrap relative">
						<image class="img-wrap x-y-center" v-if="form.adminPhoto" :src="`${host}/${form.adminPhoto}`"></image>
						<image class="img-wrap x-y-center" v-else src="/static/images/admin.jpg"></image>
						<view class="choose-btn x-y-center text-center">
							<text class="iconfontPT iconpaizhaoshangchuan"></text>
							<text class="name">上传证照</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item relative business-license w100" @click="handleChooseImage('license')">
				<text class="label">营业执照<text class="gray">(若无,可上传门头照)</text></text>
				<view class="photo-wrap x-y-center">
					<view class="photo business-license-wrap relative">
						<image class="img-wrap x-y-center" v-if="form.businessLicensePhoto" :src="`${host}/${form.businessLicensePhoto}`"></image>
						<image class="img-wrap x-y-center" v-else src="/static/images/business_license.png"></image>
						<view class="choose-btn x-y-center text-center">
							<text class="iconfontPT iconpaizhaoshangchuan"></text>
							<text class="name">上传营业执照</text>
						</view>
					</view>
				</view>
			</view>

			<view class="form-item relative authorization w100" @click="handleChooseImage('authorization')">
				<text class="label">授权书<text class="gray">(非必传)</text></text>
				<view class="photo-wrap x-y-center">
					<view class="photo authorization-wrap relative">
						<image class="img-wrap x-y-center" v-if="form.authorizationPhoto" :src="`${host}/${form.authorizationPhoto}`"></image>
						<image class="img-wrap x-y-center" v-else src="/static/images/authorization.jpg"></image>
						<view class="choose-btn x-y-center text-center">
							<text class="iconfontPT iconpaizhaoshangchuan"></text>
							<text class="name">上传授权书</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item clear">
				<text class="label pull-left">负责人手机</text>
				<input class="form-inp pull-left" type="text" @change="messageSented = false" v-model="form.adminPhone" placeholder="请输入负责人手机"></input>
				<u-verification-code :seconds="codeSeconds" @end="handleCodeTimingEnd" @change="handleCodeChange" ref="uCode"></u-verification-code>
				<view class="form-item__code-button" @tap="handleSendMessage">{{codeTips}}</view>
			</view>
			<view class="form-item clear">
				<text class="label pull-left">手机验证码</text>
				<input class="form-inp pull-left" type="text" v-model="code" placeholder="请输入手机验证码" />
			</view>
		</view>
		<view class="waring-wrap">
			<view class="title">
				注意事项
			</view>
			<view class="content">
				<view class="item">
					1.请不要上传电子文档版/扫描版/截屏版授权书；
				</view>
				<view class="item">
					2.授权书需要加盖公司公章或人事公章，落款日期在<text class="theme">7日</text>以内；
				</view>
				<view class="item">
					3.不支持帮被人代申请；
				</view>
				<view class="item">
					4.拍摄于所填<text class="theme">公司全称一致</text>的营业执照上传；
				</view>
				<view class="item">
					5.核准日期为<text class="theme">最新</text>；
				</view>
				<view class="item">
					6.公章<text class="theme">清晰可辨</text>；
				</view>
			</view>
		</view>
		<view class="confirm-btn-wrap w100 bg-white">
			<button class="confirm-btn" hover-class="hoverClass" @click="handleSubmitForm">
				立即加入
			</button>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {joinUs,sendMessage,chekCode} from '../../../apis/personal/index.js';
	export default {
		data() {
			return {
				codeTips:'',
				codeSeconds:60,
				messageSented:false,
				type: '',
				initType: '',
				code:'',
				form: {
					type: '',
					name: '',
					typeId: '',
					photos: [],
					latitude: '',
					longitude: '',
					location: '',
					adminName: '',
					adminPhone: '',
					adminPhoto: '',
					idCardNumber: '',
					authorizationPhoto: '',
					businessLicensePhoto: '',
					profession:1,
				},
				typeList: [{
					name: '新车',
					id: 1
				}, {
					name: '二手车',
					id: 2
				}, {
					name: '门店',
					id: 3
				}, ],
				rules: {
					type: [{
						required: true,
						message: '请选择类型',
					}],
					name: [{
						min: 2,
						max: 30,
						message: '公司名称字符长度在 2 到 30 个字符',
					},{
						required: true,
						message: '请输入公司名称',
					}],
					location: [{
						required: true,
						message: '请选择公司地址',
					}],
					photos: [{
						required: true,
						message: '请上传公司形象照',
					}],
					adminName: [{
						required: true,
						message: '请输入负责人姓名',
					}],
					idCardNumber: [{
						isIdCard: true,
						message: '请输入有效身份证号',
					}],
					adminPhoto: [{
						required: true,
						message: '请上传负责人照片',
					}],
					businessLicensePhoto: [{
						required: true,
						message: '请上传营业执照',
					}],
					adminPhone: [{
						isPhone: true,
						message: '请输入有效手机号码',
					}]
				}
			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			},
			showProfession(){
				return this.form.typeId === 2
			}
		},
		onLoad(options) {
			if(!uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			};
			this.type = options.type;
			
			const currenTypeObj = this.typeList.find((item) =>{
				return item.id == this.type;
			});
			
			if(currenTypeObj && currenTypeObj.id) {
				this.initType = currenTypeObj;
				this.form.type = this.initType.name;
				this.form.typeId = this.initType.id;
			}
		},
		methods: {
			async handleSendMessage(){
				try{
					if(this.$u.test.mobile(this.form.adminPhone)){
						if(this.$refs.uCode.canGetCode){
							uni.showLoading({title: '发送验证码...'})
							const {code,msg} = await sendMessage({mobile:this.form.adminPhone,event:'promote'})
							if(code === 1){
								this.$refs.uToast.show({title: '验证码已发送，注意查收！',type:'success',position:'top'})
								this.messageSented = true
							}else{
								uni.showModal({ title:'',content:msg,showCancel:false})
							}
							this.$refs.uCode.start()
						}
					}else{
						this.$refs.uToast.show({title: '手机号格式不正确!',type:'warning',position:'top'})
					}
				}catch(e){
					this.$refs.uToast.show({title: e.message,type:'error',position:'top'})
				}finally {
					uni.hideLoading()
				}
			},
			handleCodeTimingEnd(){
				
			},
			handleCodeChange(value){
				this.codeTips = value
			},
			/**
			 * 验证短信验证码
			 */
			async checkCodeStatus(mobile,captcha){
					const {data,code,msg} = await chekCode({mobile,captcha,event:'promote'})
					if(code === 1){
						return code
					}else{
						throw new Error(msg)
					}
			},
			async handleSubmitForm(){
					this.$verification(this.form,this.rules,async valid => {
						if(valid){
							if(this.messageSented){
								try{
									await this.checkCodeStatus(this.form.adminPhone,this.code)
									const {data,code,info} = await joinUs({
										yyzz: this.form.businessLicensePhoto,
										img: this.form.photos.join(','),
										sfz: this.form.adminPhoto,
										type: this.initType.id || this.form.typeId,
										title: this.form.name,
										name: this.form.adminName,
										phone: this.form.adminPhone,
										id_card: this.form.idCardNumber,
										sqs_img: this.form.authorizationPhoto,
										longitude: this.form.longitude,
										latitude: this.form.latitude,
										address: this.form.location,
										factory_id: uni.getStorageSync('factory_id') || 1,
										profession:this.showProfession?this.form.profession:null
									})
									if(code === 200){
										this.$refs.uToast.show({title:info,type:'success',position:'top',back:true,duration:3000})
									}else{
										this.$refs.uToast.show({title:info,type:'warning',position:'top',duration:3000})
									}
								}catch(e){
									this.$refs.uToast.show({title:e.message,type:'error',position:'top',duration:3000})
								}

							}else{
								this.$refs.uToast.show({title:'验证码失效，请重新获取！',type:'warning',position:'top',duration:3000})
							}
						}
					})
			},
			handleChooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: res => {
						_this.form.location = res.address
						_this.form.longitude = res.longitude
						_this.form.latitude = res.latitude
					},
				})
			},
			handleDeleteImg(i) {
				const photos = this.form.photos
				this.form.photos = photos.filter(item => item !== i)
			},
			handleChooseImage(type) {
				let _this = this
				this.$uploadImage({
						imageCompressFn: this.$refs.imageCompress.start
					})
					.then(res => {
						type === 'admin' && (_this.form.adminPhoto = res)
						type === 'license' && (_this.form.businessLicensePhoto = res)
						type === 'authorization' && (_this.form.authorizationPhoto = res)
						type === 'photo' && _this.form.photos.push(res)
					})
			},
			handleGenderChange(e) {
				let id = +e.detail.value + 1,
					value = this.typeList.find(item => item.id == id);

				this.form.type = value.name
				this.form.typeId = value.id
			}
		}
	}
</script>

<style lang="less">
	.join-wrap {
		padding-bottom: 240rpx;

		.form {
			padding: 30rpx;

			.form-item {
				border-bottom: 1rpx solid rgba(199, 190, 190, .5);
				font-size: 30rpx;
				padding: 15px 0;
				.form-inp{
					width: 300rpx;
				}
				&__code-button{
					color: #E41805;
					white-space: nowrap;
				}
				.placeholder {
					color: #999999;
				}

				.label {
					color: #333333;
					width: 200rpx;
				}

				&.admin,
				&.business-license,
				&.authorization {
					height: 600rpx;
				}

				.photo-wrap {
					margin-top: 30rpx;

					.photo {
						width: 408rpx;
						height: 524rpx;
						background: url('http://cdn1.cheyizhuan.com/common/join_bg.png-t.m90xx');
						background-size: cover;
						margin: 40rpx 130rpx;


						.img-wrap {
							width: 308rpx;
							height: 423rpx;
						}

						.choose-btn {
							width: 375rpx;
							height: 72rpx;
							line-height: 72rpx;
							border-radius: 50rpx;
							background: #E41805;
							color: #ffffff;

							.name {
								margin-left: 20rpx
							}

							.iconfontPT {
								color: #ffffff;
							}
						}

						&.admin-wrap {}

						&.business-license-wrap {}
					}
				}

				.image-wrap {
					margin-top: 30rpx;

					.image-item {
						margin: 5px;
						margin-bottom: 20rpx;

						&::after {
							position: absolute;
							top: 0;
							left: 0;
							content: '';
							width: 100%;
							height: 100%;
							display: inline-block;
							background: rgba(0, 0, 0, .5);
							z-index: 1;
						}

						.delete {
							z-index: 2;
							position: absolute;
							left: 80%;
							top: 5%;
						}

						.image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.chooseImage {
						width: 200rpx;
						height: 200rpx;
						background: #f8f8f8;

						.text {
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
					}
				}

			}
		}

		.waring-wrap {
			.title {
				color: #333333;
			}

			padding: 30rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
		}

		.confirm-btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			height: 166rpx;
			z-index: 111;

			.confirm-btn {
				width: 690rpx;
				margin-top: 15rpx;
				background: #E41805FF;
				color: #ffffff;
				font-size: 30rpx;
			}
		}
	}
	
	.form-radio-group{
		flex: 1;
	}
</style>
